<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item >商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-button type="primary" plain class="Button" @click="GoAddGoods"
        >添加商品</el-button
      >
      <template>
        <el-table :data="goodsList" style="width: 100%" fit border>
          <el-table-column type="index" width="50" prop="goods_name">
          </el-table-column>
          <el-table-column label="商品名称" width="500" prop="goods_name">
          </el-table-column>
          <el-table-column label="商品价格" width="80" prop="goods_price">
            <template slot-scope=""> </template>
          </el-table-column>
          <el-table-column label="商品数量" width="80" prop="goods_number">
            <template slot-scope=""> </template>
          </el-table-column>
          <el-table-column label="商品重量" width="80" prop="goods_weight">
            <template slot-scope=""> </template>
          </el-table-column>
          <el-table-column label="创建时间" width="180" prop="add_time">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{
                scope.row.add_time | dataFormat
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-dialog title="修改商品" :visible.sync="dialogFormVisible">
                <el-form :model="setGoodsList">
                  <el-form-item label="商品名称">
                    <el-input
                      autocomplete="off"
                      v-model="setGoodsList.goods_name"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="商品价格">
                    <el-input
                      autocomplete="off"
                      v-model="setGoodsList.goods_price"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="商品数量">
                    <el-input
                      autocomplete="off"
                      v-model="setGoodsList.goods_number"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="商品重量">
                    <el-input
                      autocomplete="off"
                      v-model="setGoodsList.goods_weight"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="setGoodsValue(scope.row)"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="querInfo.pagenum"
          :page-sizes="[3, 6, 9, 11]"
          :page-size="querInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </template>
    </el-card>
  </div>
</template>


<script>
export default {
  data() {
    return {
      goodsList: [],
      setGoodsList: [],
      dialogFormVisible: false,
      goodsId: "",
      // 查询条件
      querInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 3,
      },
      total: 0,
    };
  },
  methods: {
    // 获取商品列表
    async getShopping(pagenum, pagesize) {
      await this.$Req
        .get(`/goods?pagenum=${pagenum}&&pagesize=${pagesize}`)
        .then((res) => {
          const { data, meta } = res.data;
          this.total = data.total;
          console.log(this.total);
          this.goodsList = data.goods;
        });
    },
    // 编辑商品
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.setGoodsList = row;
      this.goodsId = row.goods_id;
    },
    async setGoodsValue(row) {
      await this.$Req
        .put(`/goods/${row.goods_id}`, this.setGoodsList)
        .then((res) => {});
    },
    // 删除商品
    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$Req.delete(`goods/${row.goods_id}`).then((res) => {
            const { data, meta } = res.data;
            if (meta.status == 200) {
              this.$message({
                type: "success",
                message: meta.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      this.getShopping();
    },
    // 监听条数改变
    handleSizeChange(newSize) {
      console.log(newSize);
      this.querInfo.pagesize = newSize;
      this.getShopping(this.querInfo.pagesize, newSize);
    },
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.querInfo.pagenum = newPage;
      this.getShopping(newPage, this.querInfo.pagesize);
    },
    GoAddGoods() {
      this.$router.push("/goods/add");
    },
  },
  mounted() {
    this.getShopping(1, 3);
  },
};
</script>

<style>
.el-main {
  line-height: 0;
}
.Button {
  float: left;
}
</style>